<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
<div id="app-2">
    <!--v-bind:title绑定title字段-->
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<div id="app3">
    <!--v-if判断是否显示-->
    <span v-if="seen">显示</span>
    <!--v-on:click绑定点击事件-->
    <button v-on:click="change1">点击</button>
    <!--简单的自定义html组件-->
    <component></component>
    <!--
        v-for 循环
        v-bind:xxx中xxx对应的自定义主键中的prop对应的值
        v-bind:key
    -->
    <cli v-for="item in items" v-bind:item="item" v-bind:key="item.id"></cli>
</div>
<div id="app5">
    <!--v-html 解析成html相当于调用了innerHtml-->
    <div v-html="htmls"></div>
    <!--将会被解析程普通文本-->
    <div>{{htmls}}</div>
    <!--设置其id属性v-bind:xxx用于绑定摸个属性值-->
    <div v-bind:id="id"></div>
</div>
</body>
<script>
    //简单的定义Vue自定义组件
    Vue.component("component", {
        template: '<li>测试效果哦</li>'
    })
    //复杂的自定义组件
    /**
     * cli为名字
     * props:中设置的是需要设置的参数
     * template:模版html代码
     */
    Vue.component("cli", {
        props: ['item'],
        template: '<li>{{item.name}}</li>'
    })
    var app = new Vue({
        el: '#app-2',
        data: {
            message: new Date().toLocaleString()
        }
    })
    var app3 = new Vue({
        el: "#app3",
        data: {
            seen: "true",
            items: [
                {
                    id: 1,
                    name: "134"
                }, {
                    id: 2,
                    name: "1232"
                }
            ]
        },
        methods: {
            change1: function () {
                app3.seen = !app3.seen;
            }
        }
    })
    function change() {
        app3.seen = !app3.seen;
    }
    var app5=new Vue({
        el:"#app5",
        data:{
            id:"a1",
            htmls:"<li>测试li</li>"
        }
    });
</script>
</html>